<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>第一个网站</title>
  <style>
    .container{
      /*垂直和水平居中*/
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      height: 300px;
      box-sizing: content-box;
      width: 300px;
      padding: 20px 30px;
      background-color: rgba(0, 0, 0, 0.3);
      /*#000 black*/
      color: #fff;
    }
    .top{
      margin-bottom: 10px;
    }
    .content{
    }
    .bottom{
      text-align: right;
    }
    .split{
      margin: 0 5px;
    }
    .item{
      margin-bottom: 10px;
      padding: 3px 10px;
      font-size: 14px;
      background-color: rgba(0,0,0,0.3);
    }
    .icon{
      position: absolute;
      right: 5px;
      top: 5px;
      width: 25px;
      height: 25px;
      background-color: #000;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="icon">
    o
  </div>
  <div class="top">
    <div class="title" style="font-size: 23px;text-align: center">我的网站</div>
    <div class="desc" style="text-align: center;font-size: 17px;border-bottom: 2px solid gray">my website</div>
  </div>
  <div class="content">
    <div class="item">网络日志</div>
    <div class="item">我的世界</div>
    <div class="item">我的世界</div>
  </div>
  <div class="bottom">
    <a style="color: #fff" href="https://www.baidu.com">Contact</a>
    <span class="split">|</span>
    <span class="link">xx.com</span>
  </div>
</div>
</body>
</html>
